<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            height: 40px;
        }

        textarea {
            width: 100%;
        }

        .item {
            padding: 10px 0;
            border-bottom: 1px solid #919191;
        }

        .content {
            margin-top: 5px;
        }

        .remove {
            float: right;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            userList: [
                {
                    name: "小明",
                    content: "小明是个帅哥！！！"
                }, {
                    name: "小红",
                    content: "小红很漂亮!!!"
                }
            ]
        }
        render() {
            return (
                <div className='box'>
                    <Child addFun={(user)=>{
                        console.log("我被调用啦")
                        this.state.userList.push(user);
                        this.setState({
                            userList:this.state.userList
                        })
                    }}></Child>
                    <h1>留言板</h1>
                    <div className='content'>
                        {
                            this.state.userList.map((item,index)=>{
                                return (
                                    <div key={index} className='item'>
                                        <div>
                                            作者：  {item.name}
                                        </div>
                                        <div className='content'>
                                            内容： {item.content}
                                            <button className='remove' onClick={
                                                ()=>{
                                                    this.state.userList.splice(index,1);
                                                    this.setState({
                                                        userList:this.state.userList
                                                    })
                                                }
                                            }>删除</button>
                                        </div>

                                    </div>
                                )
                            })
                        }
                        {
                            this.state.userList.length===0 && <div>暂无数据</div>
                        }
                    </div>
                </div>
            )
        }
        
    }
    class Child extends React.Component {
        state = {
            name: "",
            content: ""
        }
        render() {
            return (
                <div className='box'>
                    <div>
                        <h2>评论人：</h2>
                        <div>
                            <input type="text" value={this.state.name} onChange={(e) => {
                                this.setState({
                                    name: e.target.value
                                })
                            }} />
                        </div>
                    </div>
                    <div>
                        <h2>评论内容：</h2>
                        <div>
                            <textarea rows="10" value={this.state.content} onChange={
                                (e) => {
                                    this.setState({
                                        content: e.target.value
                                    })
                                }
                            }></textarea>
                        </div>
                    </div>
                    <button onClick={()=>this.send()}>发表</button>
                </div>
            )
        }
        send(){
            // 获取输入框内容
            let {name,content} = this.state;
            console.log(this.props.addFun)
            let user = {
                name,
                content
            }
            // 调用父组件传递的函数
            this.props.addFun(user)
            this.setState({
                name:"",
                content:""
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"));
</script>

</html>